<template>
  <div >
    <div class="nav-custom" :style="{height:customBar+'px;'}">
      <div  class="nav-bar" :style="{height:customBar - statusBarHeight+'px;' + 'padding-top:' + statusBarHeight + 'px;'}">
        <div class="nav-content" :style="{top:statusBarHeight+'px;'}">我的</div>
      </div>
    </div>
    <div class="user-box" :style="{height:userBoxHeigth+'px;'}">
      <div class="mobile" :style="{paddingTop:customBar+'px;'}">
        <div class="user-mobile">
          <img src="/static/images/icon_gerenzhongxin.png">
          <text>{{mobile}}</text>
        </div>
        <div class="renz">
          <img v-show="renzheng == 1 ?false : true" src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/yirenzheng.png"/>
          <img @click="goRealName" v-show="renzheng == 1 ?true : false" src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/weirenzheng.png"/>
          <img class="qiye" v-show="qiye == 1 ?true : false" src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/qiyeyonghu.png"/>
        </div>
      </div>
    </div>
    <div class="content-box">
      <swiper v-if="noticeVos.length > 0" class="swiper-container" :indicator-dots="true" :autoplay="true">
        <block v-for="(item,index) in noticeVos" :index="index" :key="index">
          <swiper-item>
            <img :src="item.imgUrl" @click="goActivity(item)" alt="">
          </swiper-item>
          </block>
        <!-- <swiper-item>
          <img src="https://img.tuguaishou.com/ips_banner/ae/13/ee/ae13eeef8bd13cf3bd6da13592823b60304.jpeg?auth_key=2215872000-0-0-ab76e7ae07b0459af1cff3e2727c3e18" alt="">
        </swiper-item>
        <swiper-item>
          <img src="https://img.tuguaishou.com/ips_banner/33/ff/40/33ff40d2eedf03e4ba694d0b3e80e7f1930.jpeg?auth_key=2215872000-0-0-8c7a66c6931bb66914d5d866eec6cdeb" alt="">
        </swiper-item> -->
      </swiper>
      <div class="account-box">
        <div class="account-item" @click="jump('coinRecharge')">
          <div><text>{{wallet.miCoinAmount}}</text>元</div>
          <div>余额</div>
        </div>
        <div v-if="wallet.depositStatus == 1" class="account-item" @click="jumpDeposit">
          <div>
            免押金卡
          </div>
          <div>押金</div>
        </div>
        <div v-else class="account-item" @click="jumpDeposit">
          <div>
            <text>{{wallet.depositAmount}}</text>元
          </div>
          <div>押金</div>
        </div>
        <div class="account-item" @click="tabbarJump('myCard')">
          <div><text>{{couponsCount}}</text>张</div>
          <div>优惠券</div>
        </div>
        <div class="account-item" @click="tabbarJump('myCard')">
          <div><text>{{cardCount}}</text>张</div>
          <div>卡</div>
        </div>
      </div>
      <div class="view">
        <div class="flex1 gray-font otherpay" @click="jump('myWallet')">
          <span>
          <img class="qianbao" src="/static/images/my/ico_qbb.png"/><text>钱包</text>
          </span>
          <img src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/icon_jiantouyou@2x.png" class="youjt" />
        </div>
        <div class="line"></div>
        <div class="flex1 gray-font otherpay" @click="tabbarJump('myCard')">
          <span>
            <img class="qianbao" src="/static/images/my/ico_yhq.png"/><text>卡券</text>
          </span>
          <img src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/icon_jiantouyou@2x.png" class="youjt" />
        </div>
        <div class="flex1 gray-font otherpay" @click="tabbarJump('myPath')">
          <span>
          <img class="qianbao" src="/static/images/my/ico_xingc.png"/><text>行程</text>
          </span>
          <img src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/icon_jiantouyou@2x.png" class="youjt" />
        </div>
        <div class="line"></div>
        <div class="flex1 gray-font otherpay" @click="jump('cardShop')">
          <span>
          <img class="qianbao" src="/static/images/my/ico_gwc.png"/><text>商城</text>
          </span>
          <img src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/icon_jiantouyou@2x.png" class="youjt" />
        </div>
        <div class="flex1 gray-font otherpay helper">
          <button @click="makePhone('4000029717')"></button>
          <span>
          <img class="qianbao" src="/static/images/my/ico_shuoming.png"/><text>帮助</text>
          </span>
          <img src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/icon_jiantouyou@2x.png" class="youjt" />
        </div>
      </div>
      <div class="quit" @click="showDialog = true">退出</div>
      <div class="dialog" v-if="showDialog">
        <div class="dialog_main" style="height: 330rpx;padding-top: 60rpx">
          <div class="tips tips-title">
            退出
          </div>
          <div class="tips tips-content">
            您要退出登录吗？
          </div>
          <div class="dialog_footer foot" style="padding-top: 60rpx">
            <button class="rightbtn" @click="showDialog = false">再想想</button>
            <button class="leftbtn" @click="quit">确定</button>
          </div>
        </div>

      </div>
    </div>
    <div class="dialog" v-if="showWalletDialog">
      <div class="dialog_main" style="padding-top: 60rpx;height: 448rpx">
        <p class="dialog_img"><img src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/mianyaka.png"></p>
        <p class="tips" style="padding: 20rpx 0 50rpx">免押金卡生效中，已免押金</p>
        <div class="dialog_footer foot">
          <button style="width: 590rpx" class="leftbtn" @click="showWalletDialog = false">好的</button>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import Service from '@/utils/service'

  export default {
    data () {
      return {
        mobile:null,
        isPass:true,
        renzheng:null,
        qiye: '',
        showDialog: false,
        familyFlag: 0,
        customBar: 0,
        statusBarHeight: 0,
        noticeVos: [
        ],
        userBoxHeigth: 175,
        wallet: {},
        couponsCount: 0,
        cardCount: 0,
        showWalletDialog: false,
        changDeposit: ''
      }
    },
    onLoad () {
      let userInfo = wx.getStorageSync('userInfo')
      if (!userInfo) {
        wx.redirectTo({
          url: '../login/main'
        })
        return
      }
      let systemInfo = wx.getStorageSync('systemInfo');
      this.statusBarHeight = systemInfo.statusBarHeight;
      let capsule = wx.getMenuButtonBoundingClientRect();
      if (capsule) {
        this.customBar = capsule.bottom + capsule.top - systemInfo.statusBarHeight;
      } else {
        this.customBar = systemInfo.statusBarHeight + 50;
      }
      this.userBoxHeigth = 220 / 2 + this.customBar;
    },
    onShow() {
      this.getperson()
      this.getNotice()
      this.getWallet()
      this.getCouponsList()
      this.getCardList()
    },
    methods: {
      goRealName() {
        wx.navigateTo({
          url: `../realName/main`
        })
      },
      goActivity(notice) {
        let url = notice.hrefUrl
        wx.navigateTo({
          url: `../webView/main?url=${url}`
        })
      },
      getperson() {
        Service.getperson()
          .then((res)=>{
            console.log(res)
            if (res.code == 200) {
              this.mobile = res.data.mobile
              this.mobile = this.mobile.replace(this.mobile.slice(3,7),'****')
              this.renzheng = res.data.veriftyStatus //1:未认证,2:身份证通过认证,3:人脸对比通过认证
              this.qiye = res.data.companyNewFlag
              this.familyFlag = res.data.familyFlag
            }
          })
      },
      quit() {
        this.showDialog = false
        wx.setStorageSync('userInfo', null);
        wx.reLaunch({
          url: '../index/main'
        })
      },
      jump(rout) {
        if (rout == 'familyAccount') {
          if (this.familyFlag == 1) {
            wx.navigateTo({
              url: `../familyAccountList/main`
            })
          } else {
            wx.navigateTo({
              url: `../familyAccount/main`
            })
          }
          return
        }
        wx.navigateTo({
          url: `../${rout}/main`
        })
      },
      tabbarJump(rout) {
        wx.switchTab({
          url: `../${rout}/main`
        })
      },
      getNotice(){
        let data = {
          adPosition: '5',
        }
        Service.getNotice(data).then((res)=>{
          console.log(res)
          if (res.code == 200) {
            this.noticeVos = res.data.noticeVos
          }
        })
      },
      getWallet() {
        Service.getwallet().then((res) => {
          console.log(res)
          if (res.code == 200) {
            this.wallet = res.data
          }
        })
      },
      makePhone(phone) {
        wx.makePhoneCall({
          phoneNumber: phone
        });
      },
      getCouponsList(page) {
        let params = {
          couponType: '1', //我的卡券处优惠券
          pageNum: 1,
          pageSize: 100000
        }
        Service.getCoupons(params)
          .then((res) => {
            if (res.code == 200) {
              if (res.data) {
                this.couponsCount = res.data.length;
              }
            }
          })
      },
      getCardList(page) {
        let params = {pageNum: 1, pageSize: 20000}
        Service.getCardList(params)
          .then((res) => {
            if (res.code == 200) {
              if (res.data) {
                this.cardCount = res.data.length
              }
            }
          })
      },
      jumpDeposit() {
        if (this.wallet.depositStatusRM == 1 && this.wallet.unDepoistCardStatusRM == 1) {
          this.showWalletDialog = true
          return
        }
        let rechargeCode = this.wallet.rechargeCode
        if (rechargeCode == 1) {
          wx.navigateTo({
            url: `../deposit/main?rechargeDepositAmount=${this.wallet.rechargeDepositAmount}&changDeposit=${this.changDeposit}`
          })
        }
        if (rechargeCode == 2) {
          wx.navigateTo({
            url: `../returnCash/main?depositAmount=${this.wallet.depositAmount}&changDeposit=${this.changDeposit}&descrptionRM=${this.wallet.descrptionRM}&refundAlertText=${this.wallet.refundAlertText}&unDepoistCardStatusRM=${this.wallet.unDepoistCardStatusRM}`
          })
        }
        if (rechargeCode == 3) {
  //          wx.navigateTo({
  //            url: `../myWallet/main`,
  //          })
        }

      }
      }
  }
</script>

<style scoped>
  .nav-custom {
    display: block;
	  position: relative;
    height: 130px;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1024;
    background: #febd19;
    color: #ffffff;
  }
  .nav-custom .nav-bar .nav-content {
    width: calc(100% - 440rpx);
    position: absolute;
    text-align: center;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    height: 60rpx;
    font-size: 32rpx;
    line-height: 60rpx;
    cursor: none;
    pointer-events: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: #ffffff;
  }
  .user-box {
    display: block;
    position: relative;
    width: 100%;
    background: #febd19;
    height: 350rpx;
  }

  .content-box {
    display: block;
    position: relative;
    width: 100%;
    border-radius: 35px 35px 0 0;
    z-index: 1;
    background: #ffffff;
    top: -35px;
    overflow: auto;
  }

  .account-box {
    display: flex;
    
    width: 670px;
    height: 140px;
    margin: 0 auto;
    margin-top: 40px;
  }
  .account-box .account-item {
    flex: 1;
    text-align: center;
    line-height: 70px;
  }

  .account-box .account-item text {
    margin-right: 10px;
    font-size: 46px;
  }
  
  .quit{
    display: block;
    width:430px;
    height:90px;
    line-height: 90px;
    margin: 0 auto;
    border-radius:45px;
    border:1px solid rgba(221,221,221,1);
    font-size:30px;
    font-weight:400;
    color:rgba(102,102,102,1);
    text-align: center;
  }
  .view{
    padding: 0 50px 0 50px;
    text-align: center;
  }
  .img3{
    width: 176rpx;
    height: 152rpx;
    margin-top: 253rpx;
    margin-bottom: 36rpx;
  }
  .user-mobile{
    display: block;
    width: 100%;
    height: 75px;
    margin-top: 10rpx;
  }
  .user-mobile img {
    display: block;
    float: left;
    width: 75px;
    height: 75px;
    margin-left: 30px;
  }
  .user-mobile text {
    display: block;
    float: left;
    height: 75px;
    line-height: 75px;
    margin-left: 20px;
  }
  .flex1{
    justify-content: space-between;
    font-size:26rpx;
    font-family:PingFangSC-Regular;
    color:rgba(102,102,102,1);

  }
  .flex1 text{
    line-height: 37rpx;
  }
  .gray-font{
    color: #333;
  }
  .swiper-container {
    display: block;
    width: 670px;
    height: 130px;
    margin: 0 auto;
    margin-top: 25px;
  }

  .helper {
    position: relative;
  }
  .helper button {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 650px;
    height: 130px;
    opacity: 0;
  }

  .swiper-container img {
    width: 670px;
    height: 130px;
  }
  .otherpay text{
    line-height: 130rpx;
  }
  .bimg{
    width: 100%;
    height: 278rpx;
  }
  .renz {
    display: block;
    width: 100%;
    height: 60px;
    margin-top: 20px;
  }
  .renz img{
    width: 180rpx;
    height: 60rpx;
    margin-left: 30px;
  }
  .renz .qiye{
    margin-left: 16px;
    width: 206rpx;
    height: 60rpx;
  }
  .qianbao{
    width: 38rpx;
    height: 37rpx;
    line-height: 37rpx;
    margin-right: 20rpx;
  }
  h2{
    font-size: 36rpx;
    text-align: left;
    color: #333;
  }
  .youjt{
    width: 13rpx;
    height: 23rpx;
  }
  .flex1 span{
    justify-content: start;
    align-items: center;
    display: inline-block;
    display: flex;
  }
  .line{
    background: #EEEEEE;
  }

  .dialog_footer .rightbtn{
    background: #fff !important;
    color: #000000 !important;
    border: none;
  }

  .dialog_footer .leftbtn{
    background: #fff !important;
    color: #febd19 !important;
  }

  .tips-title {
    font-size: 36px;
    color: #000000;
  }

  .tips-content {
    padding-top: 20px;
    color: #888888;
  }
  .dialog_img {
    text-align: center;
  }
  .dialog_img img{
    width: 120px;
    height: 120px;
  }

</style>
